<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保养管理 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部导航栏 -->
        <div class="bg-white shadow-sm">
            <div class="flex items-center justify-between px-4 py-3">
                <button onclick="window.parent.navigateTo('home.html')" class="p-1 text-gray-500">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-lg font-medium text-dark">保养管理</h1>
                <button class="p-1 text-gray-500" id="addMaintenanceBtn">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        
        <!-- 标签页导航 -->
        <div class="bg-white border-b border-gray-100">
            <div class="flex">
                <button class="flex-1 py-3 text-center text-sm font-medium text-primary border-b-2 border-primary" id="scheduleTab">保养计划</button>
                <button class="flex-1 py-3 text-center text-sm font-medium text-gray-500" id="historyTab">保养记录</button>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto">
            <!-- 保养计划列表 -->
            <div id="scheduleList" class="p-4">
                <div class="space-y-3">
                    <!-- 保养计划1 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1583328620798-5a40a1ae370c?q=80&w=100&auto=format&fit=crop" alt="电动螺丝刀" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电动螺丝刀 - 润滑保养</h3>
                                    <p class="text-xs text-gray-500">每使用10次需润滑</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">已过期</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>下次保养：2023-07-10</span>
                                <span class="text-red-600">逾期13天</span>
                            </div>
                            <div class="flex justify-between">
                                <span>上次保养：2023-06-15</span>
                                <span>已使用：12次</span>
                            </div>
                        </div>
                        <div class="flex border-t border-gray-100">
                            <button class="flex-1 p-2 text-center text-sm text-green-600 hover:bg-green-50 transition-colors">
                                <i class="fa fa-wrench mr-1"></i>执行保养
                            </button>
                            <button class="flex-1 p-2 text-center text-sm text-blue-600 hover:bg-blue-50 transition-colors">
                                <i class="fa fa-calendar mr-1"></i>调整计划
                            </button>
                        </div>
                    </div>
                    
                    <!-- 保养计划2 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1610736188089-3483a7cc71e5?q=80&w=100&auto=format&fit=crop" alt="电锯" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电锯 - 刀片检查</h3>
                                    <p class="text-xs text-gray-500">每使用5小时需检查</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">即将到期</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>下次保养：2023-07-28</span>
                                <span>剩余3天</span>
                            </div>
                            <div class="flex justify-between">
                                <span>上次保养：2023-07-01</span>
                                <span>已使用：4.5小时</span>
                            </div>
                        </div>
                        <div class="flex border-t border-gray-100">
                            <button class="flex-1 p-2 text-center text-sm text-green-600 hover:bg-green-50 transition-colors">
                                <i class="fa fa-wrench mr-1"></i>执行保养
                            </button>
                            <button class="flex-1 p-2 text-center text-sm text-blue-600 hover:bg-blue-50 transition-colors">
                                <i class="fa fa-calendar mr-1"></i>调整计划
                            </button>
                        </div>
                    </div>
                    
                    <!-- 保养计划3 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1611930388690-2001a00c7a7f?q=80&w=100&auto=format&fit=crop" alt="电钻" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电钻 - 清洁维护</h3>
                                    <p class="text-xs text-gray-500">每月清洁一次</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">正常</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>下次保养：2023-08-15</span>
                                <span>剩余20天</span>
                            </div>
                            <div class="flex justify-between">
                                <span>上次保养：2023-07-15</span>
                                <span>状态：正常</span>
                            </div>
                        </div>
                        <div class="flex border-t border-gray-100">
                            <button class="flex-1 p-2 text-center text-sm text-green-600 hover:bg-green-50 transition-colors">
                                <i class="fa fa-wrench mr-1"></i>执行保养
                            </button>
                            <button class="flex-1 p-2 text-center text-sm text-blue-600 hover:bg-blue-50 transition-colors">
                                <i class="fa fa-calendar mr-1"></i>调整计划
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 保养记录列表 (默认隐藏) -->
            <div id="historyList" class="p-4 hidden">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-sm font-medium">保养历史记录</h2>
                    <select class="text-sm border-none bg-transparent text-gray-500 focus:outline-none">
                        <option>全部</option>
                        <option>本月</option>
                        <option>上月</option>
                        <option>近三个月</option>
                        <option>今年</option>
                    </select>
                </div>
                
                <div class="space-y-3">
                    <!-- 历史记录1 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1611930388690-2001a00c7a7f?q=80&w=100&auto=format&fit=crop" alt="电钻" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电钻 - 清洁维护</h3>
                                    <p class="text-xs text-gray-500">执行人：李先生</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已完成</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>保养日期：2023-07-15</span>
                                <span>耗时：30分钟</span>
                            </div>
                            <div>
                                <span>备注：清洁机身，检查钻头，上润滑油</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 历史记录2 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1607194429575-37ef6b2328b5?q=80&w=100&auto=format&fit=crop" alt="扳手" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">扳手套装 - 防锈处理</h3>
                                    <p class="text-xs text-gray-500">执行人：张先生</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已完成</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>保养日期：2023-07-01</span>
                                <span>耗时：20分钟</span>
                            </div>
                            <div>
                                <span>备注：清洁所有扳手，喷涂防锈剂，整理收纳</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 历史记录3 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1604199055896-462a9e9b5959?q=80&w=100&auto=format&fit=crop" alt="园艺剪" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">园艺剪 - 刀片打磨</h3>
                                    <p class="text-xs text-gray-500">执行人：王女士</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已完成</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>保养日期：2023-06-15</span>
                                <span>耗时：45分钟</span>
                            </div>
                            <div>
                                <span>备注：打磨刀片，调整螺丝，清洁刀刃</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加保养计划的模态框 -->
    <div id="addMaintenanceModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-5/6 max-w-sm p-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">添加保养计划</h3>
                <button id="closeModalBtn" class="text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="addMaintenanceForm">
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">选择工具</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="">请选择工具</option>
                        <option value="1">电钻</option>
                        <option value="2">螺丝刀套装</option>
                        <option value="3">扳手</option>
                        <option value="4">园艺修剪机</option>
                        <option value="5">激光测距仪</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">保养类型</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入保养类型（如：润滑保养、清洁维护）">
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">保养周期</label>
                    <div class="flex items-center space-x-2">
                        <input type="number" class="w-24 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="数值">
                        <select class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option>使用次数</option>
                            <option>使用小时</option>
                            <option>天</option>
                            <option>周</option>
                            <option>月</option>
                            <option>年</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">下次保养日期</label>
                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">保养说明（可选）</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入保养说明和注意事项" rows="2"></textarea>
                </div>
                <div class="flex space-x-2">
                    <button type="button" id="cancelAddBtn" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 执行保养的模态框 -->
    <div id="performMaintenanceModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-5/6 max-w-sm p-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">执行保养</h3>
                <button id="closePerformModalBtn" class="text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="performMaintenanceForm">
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">工具名称</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50" value="电动螺丝刀" disabled>
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">保养类型</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50" value="润滑保养" disabled>
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">保养日期</label>
                    <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">执行人</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入执行人姓名">
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">耗时（分钟）</label>
                    <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入保养耗时">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">保养备注</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入保养详情和结果" rows="3"></textarea>
                </div>
                <div class="flex space-x-2">
                    <button type="button" id="cancelPerformBtn" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">确认完成</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化标签页切换
            initTabs();
            
            // 初始化模态框功能
            initModals();
            
            // 为执行保养按钮添加事件监听
            document.querySelectorAll('button:has(.fa-wrench)').forEach(button => {
                button.addEventListener('click', function() {
                    const toolName = this.closest('.bg-white').querySelector('h3').textContent.split(' - ')[0];
                    const maintenanceType = this.closest('.bg-white').querySelector('h3').textContent.split(' - ')[1];
                    
                    // 设置模态框中的工具名称和保养类型
                    const performForm = document.getElementById('performMaintenanceForm');
                    performForm.querySelector('input[disabled]:first-of-type').value = toolName;
                    performForm.querySelector('input[disabled]:last-of-type').value = maintenanceType;
                    
                    // 打开执行保养模态框
                    const performModal = document.getElementById('performMaintenanceModal');
                    performModal.classList.remove('hidden');
                    setTimeout(() => {
                        performModal.querySelector('.bg-white').classList.add('scale-100');
                        performModal.querySelector('.bg-white').classList.remove('scale-95', 'opacity-0');
                    }, 10);
                });
            });
            
            // 为调整计划按钮添加事件监听
            document.querySelectorAll('button:has(.fa-calendar)').forEach(button => {
                button.addEventListener('click', function() {
                    const toolName = this.closest('.bg-white').querySelector('h3').textContent.split(' - ')[0];
                    const maintenanceType = this.closest('.bg-white').querySelector('h3').textContent.split(' - ')[1];
                    
                    // 设置模态框中的工具名称和保养类型
                    const form = document.getElementById('addMaintenanceForm');
                    const toolSelect = form.querySelector('select');
                    
                    // 尝试选中对应的工具
                    for(let i = 0; i < toolSelect.options.length; i++) {
                        if(toolSelect.options[i].text === toolName) {
                            toolSelect.value = toolSelect.options[i].value;
                            break;
                        }
                    }
                    
                    form.querySelector('input[type="text"]').value = maintenanceType;
                    
                    // 打开添加/编辑保养计划模态框
                    const modal = document.getElementById('addMaintenanceModal');
                    modal.classList.remove('hidden');
                    setTimeout(() => {
                        modal.querySelector('.bg-white').classList.add('scale-100');
                        modal.querySelector('.bg-white').classList.remove('scale-95', 'opacity-0');
                    }, 10);
                });
            });
        });
        
        // 初始化标签页切换功能
        function initTabs() {
            const scheduleTab = document.getElementById('scheduleTab');
            const historyTab = document.getElementById('historyTab');
            const scheduleList = document.getElementById('scheduleList');
            const historyList = document.getElementById('historyList');
            
            scheduleTab.addEventListener('click', function() {
                // 激活保养计划标签
                scheduleTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                scheduleTab.classList.remove('text-gray-500');
                // 禁用保养记录标签
                historyTab.classList.add('text-gray-500');
                historyTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                // 显示保养计划列表
                scheduleList.classList.remove('hidden');
                historyList.classList.add('hidden');
            });
            
            historyTab.addEventListener('click', function() {
                // 激活保养记录标签
                historyTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                historyTab.classList.remove('text-gray-500');
                // 禁用保养计划标签
                scheduleTab.classList.add('text-gray-500');
                scheduleTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                // 显示保养记录列表
                historyList.classList.remove('hidden');
                scheduleList.classList.add('hidden');
            });
        }
        
        // 初始化模态框功能
        function initModals() {
            // 添加保养计划模态框
            const addModal = document.getElementById('addMaintenanceModal');
            const addBtn = document.getElementById('addMaintenanceBtn');
            const closeAddBtn = document.getElementById('closeModalBtn');
            const cancelAddBtn = document.getElementById('cancelAddBtn');
            const addForm = document.getElementById('addMaintenanceForm');
            
            // 打开添加模态框
            addBtn.addEventListener('click', function() {
                addModal.classList.remove('hidden');
                setTimeout(() => {
                    addModal.querySelector('.bg-white').classList.add('scale-100');
                    addModal.querySelector('.bg-white').classList.remove('scale-95', 'opacity-0');
                }, 10);
            });
            
            // 关闭添加模态框的函数
            function closeAddModal() {
                addModal.querySelector('.bg-white').classList.remove('scale-100');
                addModal.querySelector('.bg-white').classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    addModal.classList.add('hidden');
                }, 200);
            }
            
            // 关闭添加模态框
            closeAddBtn.addEventListener('click', closeAddModal);
            cancelAddBtn.addEventListener('click', closeAddModal);
            
            // 点击添加模态框外部关闭
            addModal.addEventListener('click', function(e) {
                if (e.target === addModal) {
                    closeAddModal();
                }
            });
            
            // 添加表单提交
            addForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 收集表单数据
                const toolSelect = addForm.querySelector('select');
                const maintenanceType = addForm.querySelector('input[type="text"]').value;
                const cycleValue = addForm.querySelector('input[type="number"]').value;
                const cycleUnit = addForm.querySelectorAll('select')[1].value;
                const nextDate = addForm.querySelector('input[type="date"]').value;
                
                if (!toolSelect.value || !maintenanceType || !cycleValue || !nextDate) {
                    alert('请填写完整的保养计划信息');
                    return;
                }
                
                const toolName = toolSelect.options[toolSelect.selectedIndex].text;
                
                // 模拟添加保养计划
                alert(`成功添加保养计划：${toolName} - ${maintenanceType}`);
                closeAddModal();
                
                // 重置表单
                addForm.reset();
            });
            
            // 执行保养模态框
            const performModal = document.getElementById('performMaintenanceModal');
            const closePerformBtn = document.getElementById('closePerformModalBtn');
            const cancelPerformBtn = document.getElementById('cancelPerformBtn');
            const performForm = document.getElementById('performMaintenanceForm');
            
            // 关闭执行保养模态框的函数
            function closePerformModal() {
                performModal.querySelector('.bg-white').classList.remove('scale-100');
                performModal.querySelector('.bg-white').classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    performModal.classList.add('hidden');
                }, 200);
            }
            
            // 关闭执行保养模态框
            closePerformBtn.addEventListener('click', closePerformModal);
            cancelPerformBtn.addEventListener('click', closePerformModal);
            
            // 点击执行保养模态框外部关闭
            performModal.addEventListener('click', function(e) {
                if (e.target === performModal) {
                    closePerformModal();
                }
            });
            
            // 执行保养表单提交
            performForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 收集表单数据
                const toolName = performForm.querySelector('input[disabled]:first-of-type').value;
                const maintenanceType = performForm.querySelector('input[disabled]:last-of-type').value;
                const maintenanceDate = performForm.querySelector('input[type="date"]').value;
                const executor = performForm.querySelectorAll('input[type="text"]')[1].value;
                const duration = performForm.querySelector('input[type="number"]').value;
                
                if (!maintenanceDate || !executor || !duration) {
                    alert('请填写完整的保养执行信息');
                    return;
                }
                
                // 模拟完成保养
                alert(`成功记录保养：${toolName} - ${maintenanceType}`);
                closePerformModal();
                
                // 重置表单
                performForm.querySelectorAll('input:not([disabled])').forEach(input => {
                    input.value = '';
                });
                performForm.querySelector('textarea').value = '';
            });
        }
    </script>
</body>
</html>